import React from 'react';
import MainIndex from "./03_React父子通信";
import Abc from "./01组件嵌套";
import Life from "./01生命周期/Life";
import Slot from './04插槽的实现'
import Slot1 from "./05作用域插槽";
import ConnectionContext from "./06非父子数据共享Context";
import './App.css'
import eventBus from "./07非父子組件通信EventBus/utils/event-bus";
import ConnectionEventBus from "./07非父子組件通信EventBus";
import User from "./08自定义数据共享/dataContext/user";
import CustomerDataContext from "./08自定义数据共享";
import Practice from "./09练习";
import FormSubmit from "./10表单提交";
import {PortalsDemo} from "./11Portals的使用";
import IndexVideo from "./12CSSTransition动画";
import SwitchVideo from "./13SwatchTransition动画";
import CssModules from "./14CssModules";
import CssLess from "./15CssLess";
import CssInJs from "./16CssInJs";

class App extends React.Component {
    constructor(args) {
        super(args);

        const one = <div>
                <Abc/>
                <Life/>
            </div>

        this.state = {
            lifeVisible: true,
            elements: [one, <MainIndex/>, <Slot/>, <Slot1/>, <ConnectionContext/>,
                <ConnectionEventBus/>, <CustomerDataContext/>, <Practice/>,
            <FormSubmit/>, <PortalsDemo/>, <IndexVideo/>, <SwitchVideo/>,
                <CssModules/>, <CssLess/>, <CssInJs/>],
            visibleIndex: 0,
            elementsLabel: ['组件嵌套', '父子组件通信', '插槽', '作用域插槽', '容器数据共享', '容器通信', '自定义数据共享', '练习', '表单提交', 'PortalsDemo',
            '动画', 'SwitchVideo动画', 'CssModules', 'CssLess', 'CssInJs']
        }
    }

    visibleSet = function (c) {
        this.setState({
            visibleIndex: c
        })
    }
    label = (text, index) => {
        let classes = ['label'];
        let { visibleIndex} = this.state;
        if (visibleIndex === index) {
            classes.push('labelVisible')
        }
        return <label onClick={e => this.visibleSet(index)} key={index} className={classes}>{text}</label>;
    };
    render() {
        let { visibleIndex, elements, elementsLabel } = this.state;
        return (
            <div>
                {elementsLabel.map(this.label)}
                {elements[visibleIndex]}
            </div>
        )
    }
    componentDidMount() {
        eventBus.on('next', (age, name, xxx) => {
            // 对象的增强，这样会转成json格式
            console.log('对象增强', {age, name, xxx})
            console.log('User', User)
        })
    }
}
export default App